import React from 'react';
import '../styles/Layout.less';
import LOGO from '../assets/img/LOGO.png';
import LoginOut from '@/components/LoginOut/LoginOut.jsx';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  withRouter
} from "react-router-dom";
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import Login from '@/pages/Login.jsx';
import NotFound from '@/pages/NotFound.jsx';
import MenuList from '@/routes/menu';
import Pop from '@/components/Pop/Pop.jsx';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

// @withRouter   //withRouter是高阶组件, 使用它是因为需要使用this.pros里面的属性,这里使用了装饰器

class LayoutPage extends React.Component {
  go=({ item, key, keyPath, domEvent })=> {   //onClik那里虽然看不到传值,但是默认会传过来四个参数,详见官网
    console.log(key);
    // this.props.history.push(key)   //编程式导航
  }
  constructor(prop) {
    super(prop);
    this.state = {
      viewComponent: null,  //页面主体区域
      isLogin: false,
      collapsed: false,
      isPop: false, //是否展示pop组件
      popList: [], //气泡数组
    }
  }
  componentDidMount() {
    console.log(MenuList)
  }
  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }
  // static getDerivedStateFromProps(nextProps, prevState) {
  //   console.log(nextProps);
  // }
  // menu跳转
  goPath = (item) => {
    console.log(item);
    this.setState({
      viewComponent: item,
    })
  }
  loginEvent = (values) => {
    console.log(values);
    if (values.username === "ymc" && values.password === "admin1") {
      this.setState({
        isLogin: true
      })
    }
  }
  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  // 页面泡泡
  pop = (e) => {
    var timer = null //timer变量记录定时器setInterval的返回值
    clearInterval(timer);
    // 获取鼠标位置
    let popLeft = 0, popTop = 0;
    let event = e || window.event;
    if (event.pageX || event.pageY) {
      popLeft = event.pageX;
      popTop = event.pageY;
    } else if (event.clientX || event.clientY) {
      popLeft = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
      popTop = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    // 图案随机背景色
    let r = Math.floor(Math.random() * 256); //随机生成256以内r值
    let g = Math.floor(Math.random() * 256); //随机生成256以内g值
    let b = Math.floor(Math.random() * 256); //随机生成256以内b值
    let a = Math.random() * 1; //随机生成1以内a值
    // return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
    console.log(`rgba(${r},${g},${b},${a})`);
    // 定义数组用于渲染图案
    let list = [...this.state.popList];
    list.push(
      {
        popLeft,
        popTop,
        heartBgColor: `rgb(${r},${g},${b})`,
        isOpacity: true
      }
    )
    this.setState({
      isPop: true,
      popList: list,
    }, () => {
      // 定义计时器，当数组长度大于0时，每隔一秒删除数组的首项
      timer = setInterval(() => {
        if (list.length > 0) {
          console.log(list.shift());
          list.shift();
          console.log(list);
          this.setState({
            isPop: true,
            popList: list,
          })
        } else {
          clearInterval(timer);
        }
      }, 1000)
    })
  }
  // 重置pop状态
  // resetPop = () => {
  //   this.setState({
  //     isPop: false
  //   })
  // }
  render() {
    const {
      viewComponent,
      isLogin,
      collapsed,
      isPop,
      popList,
    } = this.state;
    console.log(isLogin);
    /**
     * 定义token用于判定登录状态（功能未实现）
    */
    // let token = this.props.token
    return (
      // {
      !isLogin ?
        <Login loginEvent={this.loginEvent} />
        :
        <Layout style={{ minHeight: '100vh' }}>
          <Header className="header">
            <div className="logo">
              <img src={LOGO} alt="" />
            </div>
            {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu> */}
            <LoginOut />
          </Header>
          <Layout>
            <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
              <div className="logo" />
              <Router>
                <Switch>
                  <Menu theme="dark" defaultSelectedKeys={['index']} mode="inline">
                    {
                      MenuList.map((item, index) => {
                        return (
                          item.children && item.children.isShow !== false ?
                            <SubMenu key={item.key} icon={<UserOutlined />} title={item.name}>
                              {
                                item.children ?
                                  item.children.map((childItem, childIndex) => {
                                    return (
                                      <Menu.Item key={childItem.key}>
                                        <Link to={childItem.path} onClick={(childItem) => this.goPath(childItem.component)}>
                                          <Icon type="pie-chart" />
                                          <span>{childItem.name}</span>
                                        </Link>
                                      </Menu.Item>
                                    )
                                  })
                                  :
                                  ''
                              }
                            </SubMenu>
                            :
                            item.isShow !== false ?
                              <Menu.Item key={item.key} icon={<PieChartOutlined />}>
                                <Link to={item.path} onClick={(item) => this.goPath(item.component)}>
                                  <Icon type="pie-chart" />
                                  <span>{item.name}</span>
                                </Link>
                              </Menu.Item>
                              :
                              ''
                        )
                      })
                    }
                  </Menu>
                  {/* 所有错误路由跳转页面 */}
                  <Route component={NotFound} />
                </Switch>
              </Router>
            </Sider>
            <Layout className="site-layout" onClick={this.pop}>
              <Content style={{ margin: '0 16px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>User</Breadcrumb.Item>
                  <Breadcrumb.Item>Bill</Breadcrumb.Item>
                </Breadcrumb>
                <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                  {viewComponent}
                </div>
              </Content>
              <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
            {
              isPop ?
                <Pop
                  popList={popList}
                />
                :
                false
            }
          </Layout>
        </Layout>
      // }
    )
  }
}
export default withRouter(LayoutPage);